import classNames from 'classnames';
import React from 'react';

interface CardProps {
    headerJSX?: React.ReactNode
    children?: React.ReactNode
    className?: string
    style?: React.CSSProperties
    shadow?: 'always' | 'hover' | 'never'
}

const Card: React.FC<CardProps> = props => {

    const { headerJSX, children, style, shadow } = props;

    const headerDom = () => {
        return headerJSX ? <div className={'yulang-card-header'}>{headerJSX}</div> : <></>
    }

    const childrenDom = () => {
        return children ? <div className={'yulang-card-body'}>{children}</div> : <></>
    }

    const classes = classNames('yulang-card-container', {
        'always-shadow': shadow === 'always',
        'hover-shadow': shadow === 'hover',
    })

    return <div className={classes} style={style}>
        {headerDom()}
        {childrenDom()}
    </div >
}

Card.defaultProps = {
    shadow: 'always'
}

export default Card;